<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineProperty</title>
</head>
<body>
<div id="app">
    <ui>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ui>
</div>
</body>
<script>
//    let list = document.getElementsByTagName("li");
//    let list = document.getElementById("app");
//    console.log(Object.defineProperty)
//    console.dir(Object.defineProperty)


//console.log(list);
//console.dir(list);
//console.error(list);
//let a = 0;
//console.time(a);
//for (let i = 0;i<1000000;i++){
//    list.innerHTML = "i=" + i
//}
//console.timeEnd(a);


//    Object.defineProperty方法  在对象上定义一个新属性
//Object.defineProperty(obj, prop, descriptor)   obj  属性名 属性描述
    /* //属性描述符

      1.数据描述符
    * configurable  是否重新配置(删除)   布尔
    * enumerable  是否可枚举 布尔  (for in  for of  Object.keys())
    * value  默认值
    * writable   是否可写 布尔
    *
    * 2.访问(存取)描述符
    * get 回调函数
    * set 回调函数
    * */

//    vue2.x Object.defineProperty核心语法
//    Object.defineProperty ES5语法   IE8不支持ES5
//    IE8不支持 vue2.x


    let obj = {
        firstName: "A",
        lastName: "B",
    };

//    obj.fullName = "A-B";
//    obj.firstName = "D";
//console.log(obj.fullName);//D-B
Object.defineProperty(obj, "fullName", {
    get(){//监听   获取
        console.log("get被触发");
        return this.firstName + "-" + this.lastName
    },
    set(value){//监听   设置
        console.log("set被触发");
        let names = value.split("-");//[C,D]
        this.firstName = names[0];
        this.lastName = names[1];
    },
});

console.log(obj.fullName);

obj.fullName="C-D";

console.log(obj.firstName);//C
console.log(obj.lastName);//D


let obj1 = {
    firstName: "A",
    lastName: "B",
};

Object.defineProperty(obj1, "fullName", {
    configurable: true, //是否可配置
    value: "A-B",
//    enumerable: false
    enumerable: true,
    writable: false,
});

//Object.defineProperty(obj1, "fullName", {
//    value: "C-D"
//});

//delete obj1.fullName;

console.log("obj1--->",obj1);
console.log("fullName---->",obj1.fullName);
obj1.fullName = "E-F";
console.log("fullName---->",obj1.fullName);



//    for (let key in obj1){
//        console.log(key)
//    }






</script>
</html>